<template>
  <Scroll ref="scroll" key="selected" :data="setting_selectedlist">
    <div>
      <ul class="settingEdit-selectedList" style="padding-top: 95px">
        <transition-group name="goodsItemSlide">
          <goodsItem
            :selected="false"
            :img="item.imgpath"
            :title="item.name"
            :note="item.sellerpoints"
            :price="item.shop_price"
            :id="item.id"
            :type="3"
            class="settingEdit-allItem"
            v-for="item in setting_selectedlist"
            :key="item.id"
            @reduce="reduceItem(item.id)"
          >
          </goodsItem>
        </transition-group>
      </ul>
    </div>
  </Scroll>
</template>
<script>
  import { getEditSelectList,uploadSelectedlist } from "api/setting"
  import {mapGetters, mapMutations,mapActions } from "vuex";
  import Scroll from "base/scroll/scroll";
  import Bus from "common/js/bus";
  import goodsItem from "base/goodsItem/goodsItem"
  import Paginate from 'vuejs-paginate';

  export default {
    data() {
      return {
        list:[],
      }
    },
    computed: { ...mapGetters(['user_phone','setting_selectedlist','user_id']) },
    methods: {
      upLoadSelectedList(){
        Bus.$emit("loading-on");
        let Ids = "";
        _.each(this.setting_selectedlist,(item)=>{
          Ids += `,${item.id}`
        });
        //避免没有user_id 情况
        if(this.user_id){
          uploadSelectedlist({goods_id:Ids.substr(1),uid:this.user_id}).then((Rs)=>{
            Bus.$emit("loading-off");
          });
        }else{
          Bus.$emit("loading-off");
          this.$router.push("/")
        }
      },
      updataAllList(){
        Bus.$emit("loading-on");
      },
      reduceItem(id){
        this.settingEditReduceItem(id);
        this.upLoadSelectedList();
      },
      ...mapMutations({
        "setSettingSelectedlist":"SET_SETTING_SELECTEDLIST",
        "setCommonHeader": "SET_COMMON_HEADER"
      }),
      ...mapActions(['settingEditReduceItem'])
    },
    components: { goodsItem,Scroll },
    mounted(){

    },
    activated(){
      this.$refs.scroll.refresh();
      this.setCommonHeader(6);
    },
    deactivated(){

    },
  }
</script>
<style lang="less" >
  .goodsItemSlide-enter-active{
    animation: fadeInLeft 0.3s linear;
  }
  .goodsItemSlide-leave-active{
    animation: fadeOutRight 0.3s linear;
  }
</style>
